<template>
  <div>
     <div class="alphabet">
			 <list :content="alphabet" indexName="alphabet" @changeType="changeType"></list>
		 </div>
		 <div class="area">
			 <list :content="area" indexName="area" @changeType="changeType"></list>
		 </div>
		 <div class="gender">
			 <list :content="gender" indexName="gender" @changeType="changeType"></list>
		 </div>
		 <div class="songType">
			 <list :content="songType" indexName="songType" @changeType="changeType"></list>
		 </div>
  </div>
</template>

<script>
	import list from '../../../../components/tab/tab_atom.vue'
  export default{
    name:'',
    data(){
      return {
        alphabet:[],
				area:['华语','欧美','日本','港台','拉丁','其他'],
				gender:['男','女','组合'],
				songType:['流行','摇滚','乡村','爵士','RB','嘻哈','其他']
      }
    },
    computed:{
      showGoods(){
        return 0
      }
    },
    props:{
      imgLink:{
        type:String,
        default(){
          return ""
        }
      }
    },
    methods:{
      changeType(i){
        console.log(i);
      }
    },
    components:{
       list
    },
    created(){
      for(let i=65;i<91;i++){
				this.alphabet.push(String.fromCharCode(i))
			}
			this.alphabet.push('*')
    },
    activated(){
    
    },
    mounted(){
    
    },
    updated(){
      
    },
    deactivated(){
    
    },
    destroyed(){
    
    },
  }
</script>

<style scoped>

</style>
